在 VSCODE 開發 VUE 在 Docker 環境下熱重載失效問題

前言

筆者使用 Win11 不知道為何常常莫名的藍底白字，而且玩遊戲時手把驅動也常常無法正確讀取。因此在猜想會不會是 Win11 的系統問題，所以一怒之下，就把系統安裝回 Win10 LTSC 版本。另一部分在公司中與同事互相討論 Docker 使用方式，就萌生這次重新安裝後，改用 Docker 做為開發環境，一些有關的部屬內容，應該會各自寫文章來記錄，這篇主要紀錄的是關於 VUE 在 Docker 環境下熱重載失效問題。

問題描述

在執行專案開發時，會希望撰寫的功能或是畫面能即時顯示與更動，此項功能就是熱重載，當把環境轉到 Docker 時，照原先的設定方式會發現，不會自動重載程式。

解決方式

1. 在建立 Docker Container 時，可以加上下列環境變數，讓 ??? 可以偵測映射過去的資料夾內容改動。

   CHOKIDAR_USEPOLLING=true
   

2. 在 vite.config.ts 文件中的 defineConfig 添加 server，這邊只要將 host 設定為全域開放，因此在宿主機可以使用 localhost 去使用服務，此外也要設定 watch 讓 vite 的程式碼來源是源於映射內容。

   server: {
     host: "0.0.0.0",
     port: 5000,
     watch: {
       usePolling: true
     }
   }
   

   Ps. 提供 Vscode Debug 的 launch.json 與 tasks.json 範例
   ### launch.json

   { "version": "0.2.0",
   "configurations": [{ 
    "type": "chrome",
    "request": "launch",
    "name": "Chrome Debug",
    "preLaunchTask": "runDev",
    "url": "http://localhost:5000",
    "webRoot": "${workspaceFolder}/src",
    "sourceMapPathOverrides": {
      "webpack:///src/*": "${webRoot}/*" },
      "sourceMaps": true,},
    ]}
   

tasks.json

{ "version": "2.0.0",
  "tasks": [{
    "label": "runDev",
    "type": "shell",
    "command": "npm run dev",
    "isBackground": true},
  ]}